<template>
  <!-- 排班计划表单弹窗 -->
  <div>
    <el-dialog
      :close-on-click-modal="false"
      v-model="visibleDialog"
      :title="props.title"
      width="1200"
      draggable
      @close="closeDialog"
      :destroy-on-close="true"
    >
      <el-form
        ref="formRef"
        :model="formData"
        :inline="true"
        :rules="rules"
        label-width="80"
      >
        <h4 class="mb-[20px] mt-[0px]">
          基本数据
          <span style="margin-left: 3%">
            当前为：{{ getWeekNumber(new Date()) }}周</span
          >
        </h4>
        <div
          class="search-container p-6"
          v-if="!formData.id && !props.schedule"
        >
          <el-row :gutter="16">
            <el-col :span="12">
              <el-form-item label="工厂" prop="plantId">
                <el-select
                  v-if="!props.isReadonly"
                  v-model="formData.plantId"
                  placeholder="请输入工厂"
                  clearable
                  @change="changePlant"
                  style="width: 90%"
                  filterable
                >
                  <el-option
                    v-for="item in plantList"
                    :key="item.id"
                    :label="item.organizationCode"
                    :value="item.id"
                  />
                </el-select>
                <span v-else>{{ plantCode(formData.plantId) }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="formData.id">
              <el-form-item label="计划日期" prop="planDate">
                <el-date-picker
                  v-if="!props.isReadonly"
                  v-model="formData.planDate"
                  placeholder="请输入计划日期"
                  value-format="YYYY-MM-DD"
                  format="YYYY-MM-DD"
                  type="date"
                  style="width: 90%"
                />
                <span v-else>{{ formData.planDate }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="!formData.id">
              <el-form-item label="工作年份" prop="year">
                <el-select
                  v-model="formData.year"
                  placeholder="请选择工作年份"
                  clearable
                  style="width: 90%"
                  filterable
                >
                  <el-option
                    v-for="item in yearOptions"
                    :key="item"
                    :value="item"
                    :label="item"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="16">
            <el-col :span="12">
              <el-form-item label="开始周" prop="weekBegin">
                <el-select
                  v-model="formData.weekBegin"
                  placeholder="请选择开始周"
                  clearable
                  style="width: 90%"
                  filterable
                >
                  <el-option
                    v-for="item in weekOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="截止周" prop="weekEnd">
                <el-select
                  v-model="formData.weekEnd"
                  placeholder="请选择截止周"
                  clearable
                  style="width: 90%"
                  filterable
                >
                  <el-option
                    v-for="item in weekOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="16">
            <el-col :span="12">
              <el-form-item label="周排班" prop="shiftWeekSetId">
                <el-select
                  v-model="formData.shiftWeekSetId"
                  value-key="id"
                  :disabled="formData.plantId === ''"
                  placeholder="请选择周排班"
                  clearable
                  style="width: 90%"
                  @change="getShiftSetListdetails"
                  filterable
                >
                  <el-option
                    v-for="item in shiftweeksetList"
                    :key="item.id"
                    :label="item.shiftWeekSetName"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否启用" prop="enabled">
                <el-radio-group v-model="formData.enabled">
                  <el-radio :label="1">启用</el-radio>
                  <el-radio :label="0">停用</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="16">
            <el-col :span="24">
              <el-form-item label="工作中心" prop="workshopList">
                <el-checkbox
                  v-model="checkAllWorkshopList"
                  :indeterminate="isIndeterminate"
                  @change="handleCheckAllChange"
                >
                  全选
                </el-checkbox>
                <el-checkbox-group
                  v-model="formData.workshopList"
                  @change="handleCheckedworkCentersChange"
                >
                  <el-tooltip
                    v-for="item in workCenters"
                    :content="`${item.workshopCode}-${item.workshopName}`"
                    effect="light"
                    placement="top"
                    :hide-after="0"
                  >
                    <el-checkbox :key="item.id" :label="item">
                      {{ `${item.workshopCode}-${item.workshopName}` }}
                    </el-checkbox></el-tooltip
                  >
                </el-checkbox-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="16">
            <el-col :span="24">
              <el-form-item label="备注" prop="remarks">
                <el-input
                  v-if="!props.isReadonly"
                  v-model="formData.remarks"
                  placeholder="请输入备注"
                  clearable
                  show-word-limit
                  type="textarea"
                  maxlength="255"
                  style="width: 100%"
                />
                <span v-else>{{ formData.remarks }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div
          class="search-container p-6"
          v-else-if="!formData.id && props.schedule"
        >
          <el-row :gutter="16">
            <el-col :span="12">
              <el-form-item label="工厂" prop="plantId">
                <el-select
                  v-if="!props.isReadonly"
                  v-model="formData.plantId"
                  placeholder="请输入工厂"
                  clearable
                  @change="changePlant"
                  style="width: 90%"
                >
                  <el-option
                    v-for="item in plantList"
                    :key="item.id"
                    :label="item.organizationCode"
                    :value="item.id"
                  />
                </el-select>
                <span v-else>{{ plantCode(formData.plantId) }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="工作中心" prop="workCenterId">
                <el-select
                  v-if="!props.isReadonly"
                  v-model="formData.workCenterId"
                  placeholder="请输入工作中心"
                  clearable
                  @change="changeWorkCenter"
                  style="width: 90%"
                  :disabled="formData.plantId === ''"
                >
                  <el-option
                    v-for="item in workCenters"
                    :key="item.id"
                    :label="`${item.workshopCode}-${item.workshopName}`"
                    :value="item.id"
                  />
                </el-select>

                <span v-else>{{ formData.workCenterCode }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="16">
            <el-col :span="12">
              <el-form-item label="计划日期" prop="planDate">
                <el-date-picker
                  v-if="!props.isReadonly"
                  v-model="formData.planDate"
                  placeholder="请输入计划日期"
                  value-format="YYYY-MM-DD"
                  format="YYYY-MM-DD"
                  type="date"
                  style="width: 90%"
                />
                <span v-else>{{ formData.planDate }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="班制">
                <el-select
                  v-if="!props.isReadonly"
                  v-model="formData.shiftSetId"
                  value-key="id"
                  :disabled="formData.plantId === ''"
                  placeholder="请选择班制"
                  style="width: 90%"
                  @change="changeShiftSet"
                >
                  <el-option
                    v-for="item in shiftSetList"
                    :key="item.id"
                    :label="item.shiftSetName"
                    :value="item.id"
                  />
                </el-select>
                <span v-else>{{ formData.shiftSetName }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="16">
            <el-col :span="12">
              <el-form-item label="是否启用" prop="enabled">
                <el-radio-group
                  v-model="formData.enabled"
                  v-if="!props.isReadonly"
                >
                  <el-radio :label="1">启用</el-radio>
                  <el-radio :label="0">停用</el-radio>
                </el-radio-group>
                <span v-else>{{
                  formData.enabled == 1 ? "启用" : "停用"
                }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="备注" prop="remarks">
                <el-input
                  v-if="!props.isReadonly"
                  v-model="formData.remarks"
                  placeholder="请输入备注"
                  clearable
                  show-word-limit
                  type="textarea"
                  maxlength="255"
                  style="width: 90%"
                />
                <span v-else>{{ formData.remarks }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div class="search-container p-6" v-else>
          <el-row :gutter="16">
            <el-col :span="12">
              <el-form-item label="工厂" prop="plantId">
                <el-select
                  v-if="!props.isReadonly"
                  v-model="formData.plantId"
                  placeholder="请输入工厂"
                  clearable
                  @change="changePlant"
                  style="width: 90%"
                >
                  <el-option
                    v-for="item in plantList"
                    :key="item.id"
                    :label="item.organizationCode"
                    :value="item.id"
                  />
                </el-select>
                <span v-else>{{ plantCode(formData.plantId) }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="工作中心" prop="workCenterId">
                <el-select
                  v-if="!props.isReadonly"
                  v-model="formData.workCenterId"
                  placeholder="请输入工作中心"
                  clearable
                  @change="changeWorkCenter"
                  style="width: 90%"
                  :disabled="formData.plantId === ''"
                >
                  <el-option
                    v-for="item in workCenters"
                    :key="item.id"
                    :label="`${item.workshopCode}-${item.workshopName}`"
                    :value="item.id"
                  />
                </el-select>

                <span v-else>{{ formData.workCenterCode }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="16">
            <el-col :span="12">
              <el-form-item label="计划日期" prop="planDate">
                <el-date-picker
                  v-if="!props.isReadonly"
                  v-model="formData.planDate"
                  placeholder="请输入计划日期"
                  value-format="YYYY-MM-DD"
                  format="YYYY-MM-DD"
                  type="date"
                  style="width: 90%"
                />
                <span v-else>{{ formData.planDate }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="班制">
                <el-select
                  v-if="!props.isReadonly"
                  v-model="formData.shiftSetId"
                  value-key="id"
                  :disabled="formData.plantId === ''"
                  placeholder="请选择班制"
                  style="width: 90%"
                  @change="changeShiftSet"
                >
                  <el-option
                    v-for="item in shiftSetList"
                    :key="item.id"
                    :label="item.shiftSetName"
                    :value="item.id"
                  />
                </el-select>
                <span v-else>{{ formData.shiftSetName }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="16">
            <el-col :span="12">
              <el-form-item label="是否启用" prop="enabled">
                <el-radio-group
                  v-model="formData.enabled"
                  v-if="!props.isReadonly"
                >
                  <el-radio :label="1">启用</el-radio>
                  <el-radio :label="0">停用</el-radio>
                </el-radio-group>
                <span v-else>{{
                  formData.enabled == 1 ? "启用" : "停用"
                }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="备注" prop="remarks">
                <el-input
                  v-if="!props.isReadonly"
                  v-model="formData.remarks"
                  placeholder="请输入备注"
                  clearable
                  show-word-limit
                  type="textarea"
                  maxlength="255"
                  style="width: 90%"
                />
                <span v-else>{{ formData.remarks }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <h4 class="mb-[20px] mt-[20px]">详细数据</h4>
        <el-card
          shadow="never"
          class="table-container"
          v-if="formData.id || props.schedule"
        >
          <!--          <template #header>-->
          <!--            <el-button type="success" plain @click="handleAdd">-->
          <!--              <i-ep-plus />-->
          <!--              新增</el-button-->
          <!--            >-->
          <!--          </template>-->
          <div class="formTable">
            <el-table
              :data="formData.details"
              style="width: 100%"
              :key="Math.random"
              border
            >
              <el-table-column
                type="index"
                label="序号"
                align="center"
                width="100"
              />
              <el-table-column
                label="班次顺序"
                props="sequenceCode"
                min-width="150"
              >
                <template #default="{ $index, row }">
                  <el-form-item
                    :prop="'details.' + $index + '.sequenceCode'"
                    :rules="rules.sonsequenceCode"
                    label-width="0"
                  >
                    <el-input
                      v-if="!props.isReadonly"
                      v-model="row.sequenceCode"
                      placeholder="请输入班次顺序"
                      clearable
                      disabled
                    />
                    <span v-else>{{ row.sequenceCode }}</span>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column
                label="班次编号"
                props="shiftCode"
                min-width="150"
              >
                <template #default="{ $index, row }">
                  <el-form-item
                    :prop="'details.' + $index + '.shiftCode'"
                    :rules="rules.sonshiftCode"
                    label-width="0"
                  >
                    <el-input
                      v-if="!props.isReadonly"
                      v-model="row.shiftCode"
                      placeholder="请输入班次编号"
                      clearable
                      disabled
                    />
                    <span v-else>{{ row.shiftCode }}</span>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column
                label="班次开始时间"
                props="shiftTimeBegin"
                min-width="150"
              >
                <template #default="{ $index, row }">
                  <el-form-item
                    :prop="'details.' + $index + '.shiftTimeBegin'"
                    :rules="rules.sonshiftTimeBegin"
                    label-width="0"
                  >
                    <el-input
                      v-if="!props.isReadonly"
                      v-model="row.timeBegin"
                      placeholder="请输入班次开始时间"
                      clearable
                      disabled
                    />
                    <span v-else>{{ row.timeBegin }}</span>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column
                label="班次结束时间"
                props="shiftTimeEnd"
                min-width="150"
              >
                <template #default="{ $index, row }">
                  <el-form-item
                    :prop="'details.' + $index + '.shiftTimeEnd'"
                    :rules="rules.sonshiftTimeEnd"
                    label-width="0"
                  >
                    <el-input
                      v-if="!props.isReadonly"
                      v-model="row.timeEnd"
                      placeholder="请输入班次结束时间"
                      clearable
                      disabled
                    />
                    <span v-else>{{ row.timeEnd }}</span>
                  </el-form-item>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
        <el-card shadow="never" class="table-container" v-else>
          <div class="formTable">
            <el-table
              :data="shiftSetListdetails || []"
              style="width: 100%"
              max-height="300"
              :key="Math.random"
              border
            >
              <el-table-column
                type="index"
                label="序号"
                align="center"
                width="100"
              />
              <el-table-column
                label="星期"
                align="center"
                prop="daySequenceName"
                width="150"
              />
              <el-table-column label="班制" min-width="150">
                <template #default="{ row }">
                  <span>{{ messhiftName(row.shiftSetId) }}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button
            v-if="!props.isReadonly"
            v-loading.fullscreen.lock="loading"
            element-loading-text="加载数据过多，请耐心等候！"
            type="primary"
            :loading="loading"
            @click="handleSubmit"
            >确 定</el-button
          >
          <el-button @click="closeDialog">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import request from "@/utils/request";
import { useDictStoreHook } from "@/store/modules/dictionary";
import { getMonthList, getYearList } from "@/utils/commonData";
import dayjs from "dayjs";
import { getWeekNumber } from "../../../../utils/dateUtils"; // 引入
const dictionaryStore = useDictStoreHook();

defineOptions({
  name: "MESMESSHIFTSCHEDULEADDORUPDATE",
  inheritAttrs: false,
});

const emit = defineEmits(["reset-table", "change-visible"]);

const props = defineProps({
  visible: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  data: {
    type: Object,
    default: () => {
      return {};
    },
  },
  isReadonly: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  schedule: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
});

/** 弹窗显示 **/
const visibleDialog = ref(false);
watch(
  () => props.visible,
  (newVal: boolean) => {
    visibleDialog.value = newVal;
  }
);

/** formData定义表单数据 */
const formRef = ref(ElForm);
let formData = reactive({
  id: "",
  organizationId: "",
  organizationCode: "",
  plantId: "",
  plantCode: "",
  workCenterId: "",
  workCenterCode: "",
  planYear: "",
  planWeek: "",
  planDate: "",
  shiftSetId: "",
  shiftSetCode: "",
  shiftSetName: "",
  version: "",
  remarks: "",
  createTime: "",
  createdUserId: "",
  createdUserName: "",
  lastUpdateTime: "",
  lastUpdatedUserId: "",
  lastUpdatedUserName: "",
  enabled: 1,
  deleted: "",
  workshopList: [],
  shiftWeekSetId: "",
  year: new Date().getFullYear(),
  weekBegin: "",
  weekEnd: "",
  details: [
    {
      id: "",
      shiftScheduleId: "",
      organizationId: "",
      organizationCode: "",
      plantId: "",
      plantCode: "",
      sequenceCode: "",
      shiftId: "",
      shiftCode: "",
      shiftTimeBegin: "",
      shiftTimeEnd: "",
      version: "",
      remarks: "",
      createTime: "",
      createdUserId: "",
      createdUserName: "",
      lastUpdateTime: "",
      lastUpdatedUserId: "",
      lastUpdatedUserName: "",
      enabled: "",
      deleted: "",
    },
  ],
  schedule: props.schedule,
});

/** rules规则 */
const validateWeek = (rule: any, value: any, callback: (a?: any) => {}) => {
  if (formData.weekBegin > formData.weekEnd) {
    callback(new Error("开始周不能大于结束周"));
  } else if (formData.weekBegin + 3 < formData.weekEnd) {
    callback(new Error("排班计划不能超过1个月（4周）"));
  } else {
    callback();
  }
};

const rules = reactive({
  plantId: [{ required: true, message: "请输入工厂", trigger: "change" }],
  workCenterId: [
    { required: true, message: "请输入工作中心", trigger: "change" },
  ],
  planDate: [{ required: true, message: "请输入计划日期", trigger: "change" }],
  shiftSetId: [{ required: true, message: "请输入班制", trigger: "change" }],
  enabled: [{ required: true, message: "请输入是否启用", trigger: "blur" }],
  year: [{ required: true, message: "请选择工作年份", trigger: "change" }],
  weekBegin: [
    { required: true, message: "请选择开始周", trigger: "change" },
    { trigger: "blur", validator: validateWeek },
  ],
  weekEnd: [{ required: true, message: "请选择结束周", trigger: "change" }],
  shiftWeekSetId: [
    { required: true, message: "请选择周排班", trigger: "change" },
  ],
  workshopList: [
    { required: true, message: "请选择工作中心", trigger: "change" },
  ],
});

const details = {
  id: "",
  shiftScheduleId: "",
  organizationId: "",
  organizationCode: "",
  plantId: "",
  plantCode: "",
  sequenceCode: "",
  shiftId: "",
  shiftCode: "",
  shiftTimeBegin: "",
  shiftTimeEnd: "",
  version: "",
  remarks: "",
  createTime: "",
  createdUserId: "",
  createdUserName: "",
  lastUpdateTime: "",
  lastUpdatedUserId: "",
  lastUpdatedUserName: "",
  enabled: "",
  deleted: "",
};

/** 编辑时赋值 */
watch(
  () => props.data,
  (newVal: any) => {
    formData.id = "";
    if (newVal?.id) {
      Object.assign(formData, props.data);
      if (formData.id) {
        getdetails();
      }
    }
    if (props.visible) {
      getShiftSetList();
      getWorkCenter();
    }
    // getShiftList();
    formData.planDate = formData.planDate
      ? dayjs(formData.planDate).format("YYYY-MM-DD")
      : "";
  }
);

/** 关闭表单弹窗 */
function closeDialog() {
  checkAllWorkshopList.value = false;
  isIndeterminate.value = false;
  visibleDialog.value = false;
  emit("change-visible", false);
  resetForm();
}

/** 重置表单 */
function resetForm() {
  formRef.value.resetFields();
  formRef.value.clearValidate();
  formData.details = [JSON.parse(JSON.stringify(details))];
  formData.id = "";
  formData.organizationId = "";
  formData.organizationCode = "";
  formData.plantId = "";
  formData.plantCode = "";
  formData.workCenterId = "";
  formData.workCenterCode = "";
  formData.planYear = "";
  formData.planWeek = "";
  formData.planDate = "";
  formData.shiftSetId = "";
  formData.shiftSetCode = "";
  formData.shiftSetName = "";
  formData.version = "";
  formData.remarks = "";
  formData.createTime = "";
  formData.createdUserId = "";
  formData.createdUserName = "";
  formData.lastUpdateTime = "";
  formData.lastUpdatedUserId = "";
  formData.lastUpdatedUserName = "";
  formData.enabled = 1;
  formData.deleted = "";
  formData.workshopList = [];
  formData.shiftWeekSetId = "";
  formData.year = new Date().getFullYear();
  formData.weekBegin = "";
  formData.weekEnd = "";
  workCenters.value = [];
  shiftSetListdetails.value = [];
}

const loading = ref(false);

/** 排班计划保存提交 */
const handleSubmit = () => {
  formRef.value.validate(async (valid: any) => {
    shiftSetList.value.forEach((item) => {
      console.log(item);

      if (item.id == formData.shiftSetId) {
        formData.shiftSetCode = item.shiftSetCode;
        formData.shiftSetName = item.shiftSetName;
      }
    });
    if (valid) {
      loading.value = true;
      const text = formData.id ? "编辑" : "新增";
      console.log("formData", toRaw(formData));
      await request({
        url: "/mes/messhiftschedule/save",
        method: "post",
        data: formData,
      }).finally(() => {
        loading.value = false;
      });
      ElMessage.success(text + `成功`);
      closeDialog();
      emit("reset-table", formData.id);
    }
  });
};

async function getdetails() {
  let sondetails = await request({
    url: "/mes/messhiftschedule/getDetails",
    method: "post",
    data: formData,
  }).finally(() => {
    loading.value = false;
  });
  formData.details = sondetails.data;
}
onMounted(async () => {
  getPlantList();
  // 获取年列表
  yearOptions.value = await getYearList();
  // 获取周列表
  weekOptions.value = await getMonthList(formData.year);
});

//工厂列表
const plantList = ref([]);
const getPlantList = async () => {
  const { data } = await request({
    url: "system/sysOrganization/getList",
    method: "post",
    data: { organizationType: 3 },
  });
  plantList.value = data;
};
// 选择工厂
const changePlant = (id: any) => {
  if (id) {
    formData.plantId = id;
    formData.plantCode = plantCode(id);
    //工厂变更清除关联内容
    formData.workCenterId = "";
    formData.workCenterCode = "";
    workCenters.value = [];
    getWorkCenter();
    formData.shiftSetId = "";
    formData.shiftSetCode = "";
    formData.shiftSetName = "";
    getShiftSetList();
    shiftweeksetList.value = [];
    getShiftweeksetList();
  } else {
    workCenters.value = [];
    formData.workshopList = [];
    shiftweeksetList.value = [];
    formData.shiftWeekSetId = "";
  }
};
const plantCode = (id: string) => {
  if (id) {
    const data = plantList.value.find((item) => item.id === id);
    return data.organizationCode;
  }
};

//工作中心
const workCenters = ref([]);
async function getWorkCenter() {
  await request({
    url: "mes/mesworkshop/getList",
    method: "post",
    data: { plantId: formData.plantId, enabled: 1 },
  }).then((res) => {
    workCenters.value = res.data;
    console.log(workCenters.value);
  });
}
const changeWorkCenter = (id: any) => {
  formData.workCenterId = id;
  workCenters.value.forEach((item) => {
    if (item.id === id) {
      formData.workCenterCode = item.workshopCode;
    }
  });
};
// 全选工作中心
const checkAllWorkshopList = ref(false);
// 不确定状态
const isIndeterminate = ref(false);
// 单选工作中心
const handleCheckedworkCentersChange = (value: any) => {
  const checkedCount = value.length;
  checkAllWorkshopList.value = checkedCount === workCenters.value.length;
  isIndeterminate.value =
    checkedCount > 0 && checkedCount < workCenters.value.length;
  if (!workCenters.value.length) checkAllWorkshopList.value = false;
};
// 全选工作中心方法
const handleCheckAllChange = (val: boolean) => {
  formData.workshopList = val ? workCenters.value : [];
  isIndeterminate.value = false;
};

// 获取周列表
const weekOptions = ref();

// 获取年度列表
const yearOptions = ref();

//班制
const shiftSetList = ref([]);
async function getShiftSetList() {
  if (formData.plantId) {
    await request({
      url: "mes/messhiftset/getList",
      method: "post",
      data: { plantId: formData.plantId, enabled: 1 },
    }).then((res) => {
      shiftSetList.value = res.data;
    });
  }
}

// 周排班列表
const shiftweeksetList = ref();
// 周排班详情
const shiftSetListdetails = ref();
// 获取周排班列表
const getShiftweeksetList = async () => {
  const { data } = await request({
    url: "mes/messhiftweekset/getList",
    method: "post",
    data: { plantId: formData.plantId, enabled: 1 },
  });
  shiftweeksetList.value = data;
};
// 获取指定周排班详情
const getShiftSetListdetails = async (value: any) => {
  if (value) {
    let { data } = await request({
      url: "/mes/messhiftweekset/getDetails",
      method: "post",
      data: {
        id: value,
      },
    }).finally(() => {
      loading.value = false;
    });
    shiftSetListdetails.value = data;
  } else {
    shiftSetListdetails.value = [];
  }
};
// 回显Code
const messhiftName = (id: string) => {
  if (id && shiftSetList.value) {
    const data = shiftSetList.value.find((item) => item.id === id);

    if (data) {
      return data.shiftSetName;
    } else {
      return "";
    }
  }
};

// 点击切换班制
const changeShiftSet = async (value: any) => {
  let sondetails = await request({
    url: "/mes/messhiftset/getDetails",
    method: "post",
    data: { id: value },
  }).finally(() => {
    loading.value = false;
  });
  formData.details = sondetails.data;
};
</script>

<style lang="scss" scoped>
h4 {
  font-weight: 400;
  color: #000;
  padding-left: 10px;
  font-size: 14px;
  line-height: 14px;
}
.formTable {
  :deep(.el-form-item) {
    margin-right: 0 !important;
  }
}
:deep(.el-dialog .el-dialog__body) {
  overflow-y: auto;
  height: 65vh;
}
:deep(.search-container .el-form-item--default .el-form-item__label) {
  // 固定宽度
  justify-content: end;
}
:deep(.el-form-item) {
  width: 100%;
}
:deep(.el-checkbox) {
  width: 14rem;
}
:deep(.el-checkbox__label) {
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 显示省略号 */
}
</style>
